<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram Redrawing</title>
</head>
<body>
<canvas id="physicsCanvas" width="800" height="420" style="border:1px solid #000000;"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrowhead
    function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10, angle = Math.PI / 7) {
        const dx = tox - fromx;
        const dy = toy - fromy;
        const lineAngle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(lineAngle - angle), toy - headlen * Math.sin(lineAngle - angle));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(lineAngle + angle), toy - headlen * Math.sin(lineAngle + angle));
        ctx.stroke();
    }

    // --- Draw Figure 2.24 ---
    function drawFig224() {
        const cx = 200;
        const cy = 200;
        const rOuter = 80;
        const rInner = 35;

        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // Z-axis
        ctx.beginPath();
        ctx.moveTo(cx, cy - 130);
        ctx.lineTo(cx, cy + 130);
        ctx.stroke();
        drawArrow(ctx, cx, cy + 130, cx, cy - 130);

        // Labels for Z-axis
        ctx.font = "20px Times New Roman";
        ctx.fillText("+z", cx + 15, cy - 120);
        ctx.fillText("-z", cx + 15, cy + 120);

        // Omega (ω) arrow
        ctx.font = "italic 20px Times New Roman";
        const w_x_start = cx - 18;
        const w_y_start = cy - 90;
        const w_x_ctrl = cx;
        const w_y_ctrl = cy - 105;
        const w_x_end = cx + 18;
        const w_y_end = cy - 90;
        ctx.beginPath();
        ctx.moveTo(w_x_start, w_y_start);
        ctx.quadraticCurveTo(w_x_ctrl, w_y_ctrl, w_x_end, w_y_end);
        ctx.stroke();
        drawArrow(ctx, w_x_ctrl, w_y_ctrl, w_x_end, w_y_end, 8, Math.PI / 6);
        ctx.fillText("ω", cx + 30, cy - 90);

        // Outer circle (sphere)
        ctx.beginPath();
        ctx.arc(cx, cy, rOuter, 0, 2 * Math.PI);
        ctx.stroke();

        // Inner circle (Path P)
        ctx.beginPath();
        ctx.arc(cx, cy, rInner, 0, 2 * Math.PI);
        ctx.stroke();

        // Radius R
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx + rInner * 0.8, cy - rInner * 0.6);
        ctx.stroke();
        ctx.fillText("R", cx + 20, cy - 5);

        // Label P
        ctx.fillText("P", cx - 25, cy + 25);

        // Figure caption
        ctx.font = "16px Arial";
        ctx.fillText("Fig. 2.24", cx, cy + 170);
    }

    // --- Draw Figure 2.25 ---
    function drawFig225() {
        const cx = 580;
        const cy = 200;
        const rSphere = 90;

        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Z-axis
        ctx.setLineDash([]);
        ctx.beginPath();
        ctx.moveTo(cx, cy - 150);
        ctx.lineTo(cx, cy - rSphere);
        ctx.moveTo(cx, cy + rSphere);
        ctx.lineTo(cx, cy + 150);
        ctx.stroke();
        drawArrow(ctx, cx, cy + 150, cx, cy - 150);

        ctx.setLineDash([5, 5]);
        ctx.beginPath();
        ctx.moveTo(cx, cy - rSphere);
        ctx.lineTo(cx, cy + rSphere);
        ctx.stroke();
        ctx.setLineDash([]);

        // Z-axis label
        ctx.font = "italic 20px Times New Roman";
        ctx.fillText("z", cx - 15, cy - 135);

        // Omega (ω) arrow
        ctx.beginPath();
        ctx.ellipse(cx, cy - 120, 20, 6, 0, Math.PI, 2 * Math.PI);
        ctx.stroke();
        const omega_arrow_x = cx + 20;
        const omega_arrow_y = cy - 120;
        ctx.beginPath();
        ctx.moveTo(omega_arrow_x, omega_arrow_y);
        ctx.lineTo(omega_arrow_x - 5, omega_arrow_y - 3);
        ctx.moveTo(omega_arrow_x, omega_arrow_y);
        ctx.lineTo(omega_arrow_x - 5, omega_arrow_y + 3);
        ctx.stroke();
        ctx.fillText("ω", cx + 32, cy - 120);

        // Sphere
        ctx.beginPath();
        ctx.arc(cx, cy, rSphere, 0, 2 * Math.PI);
        ctx.stroke();

        // Path P
        ctx.beginPath();
        ctx.ellipse(cx, cy, 35, 12, 0, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.fillText("O", cx - 18, cy + 12);
        ctx.fillText("P", cx - 45, cy + 35);

        // Ring on sphere
        const ring_y_top = cy - 48;
        const ring_x_rad_top = Math.sqrt(rSphere**2 - (cy - ring_y_top)**2);
        ctx.beginPath();
        ctx.moveTo(cx - ring_x_rad_top, ring_y_top);
        ctx.quadraticCurveTo(cx, ring_y_top - 12, cx + ring_x_rad_top, ring_y_top);
        ctx.stroke();
        
        const ring_y_bot = cy - 38;
        const ring_x_rad_bot = Math.sqrt(rSphere**2 - (cy - ring_y_bot)**2);
        ctx.beginPath();
        ctx.moveTo(cx - ring_x_rad_bot, ring_y_bot);
        ctx.quadraticCurveTo(cx, ring_y_bot - 12, cx + ring_x_rad_bot, ring_y_bot);
        ctx.stroke();

        // Radius vector r
        const r_end_x = cx + ring_x_rad_top;
        const r_end_y = ring_y_top;
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(r_end_x, r_end_y);
        ctx.stroke();
        drawArrow(ctx, cx, cy, r_end_x, r_end_y);
        ctx.fillText("r", r_end_x + 10, r_end_y);

        // Angle theta (θ)
        const theta_angle = Math.atan2(cy - r_end_y, r_end_x - cx);
        ctx.beginPath();
        ctx.arc(cx, cy, 30, -Math.PI / 2, -Math.PI / 2 + theta_angle, false);
        ctx.stroke();
        ctx.fillText("θ", cx + 30, cy - 20);

        // Rdθ label
        const Rdt_x = cx - 55;
        const Rdt_y_top = 150;
        const Rdt_y_bot = 160;
        ctx.beginPath();
        ctx.moveTo(Rdt_x, Rdt_y_top);
        ctx.lineTo(Rdt_x, Rdt_y_bot);
        ctx.moveTo(Rdt_x - 4, Rdt_y_top);
        ctx.lineTo(Rdt_x + 4, Rdt_y_top);
        ctx.moveTo(Rdt_x - 4, Rdt_y_bot);
        ctx.lineTo(Rdt_x + 4, Rdt_y_bot);
        ctx.stroke();
        ctx.fillText("Rdθ", Rdt_x - 35, (Rdt_y_top + Rdt_y_bot) / 2);

        // dl vector
        const dl_start_x = cx + 75;
        const dl_start_y = 163;
        ctx.beginPath();
        ctx.moveTo(dl_start_x, dl_start_y);
        ctx.lineTo(dl_start_x + 20, dl_start_y - 5);
        ctx.stroke();
        drawArrow(ctx, dl_start_x, dl_start_y, dl_start_x + 20, dl_start_y - 5);
        ctx.fillText("dl", dl_start_x + 30, dl_start_y);

        // Figure caption
        ctx.font = "16px Arial";
        ctx.fillText("Fig. 2.25", cx, cy + 170);
    }

    drawFig224();
    drawFig225();
</script>

</body>
</html>